<template>
  <div>
    <Albumlist :list="list"></Albumlist>
    <!-- 分页 -->
    <div v-if=" list!==''" class="next">
      <el-pagination  @current-change="change" background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Albumlist from '@/components/AlbumList'
export default {
  components: {
    Albumlist,
  },
  name: 'album',
  data() {
    return {
      list: '',
      limit: 20,
      total: 0,
    }
  },
  methods: {
    // 切换分页
    async change(e) {
      const { data: res } = await this.$http(
        `/cloudsearch?keywords=${
          this.$store.state.search.searchName
        }&type=10&limit=${this.limit}&offset=${(e - 1) * this.limit}`
      )
      if (res.code !== 200) return this.$message.error('暂无视频')
      this.list = res.result.albums
      console.log(res.result)
    },
    async getdata() {
      const { data: res } = await this.$http.get(
        `/cloudsearch?keywords=${this.$store.state.search.searchName}&type=10&limit=${this.limit}`
      )
      if (res.code !== 200) return this.$message.error('搜索失败')
      this.list = res.result.albums
      // 总数传到vuex
      this.$store.commit('search/getsongCount', res.result.albumCount)
      // 分页多少条
      this.total =  Number((res.result.albumCount / 20).toFixed(0) + '0')

    },
  },
  created() {
    this.getdata()
    this.$store.commit('search/getsearchlist', this.$route.meta.title)
  },
}
</script>

<style scoped lang="less">
.album-box {
  display: flex;
  flex-wrap: wrap;
}
.next {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}
</style>